<template>
<div style="background:#ffffff" class="rounded-lg ">
  
  
  
  <div class="flex justify-between  p-2" style="background-color: #f2f2f2">
    <span class="justify-start flex flex-1">时间</span>
    <span class="flex flex-1 justify-center">变动记录</span>
    <span class="flex flex-1 justify-start">变动原因</span>
    <span class="flex flex-1 justify-center">金额</span>
    
  </div>
  <a-list item-layout="horizontal" :data-source="listData">
    
    <template #renderItem="{ item }">
      <a-list-item key="item.title"   >
         <div class="flex w-full justify-between p-2">
            <span class="justify-start flex flex-1">{{ item.createDate }}</span>
            <span class="flex flex-1 justify-center">{{ item.qyj>0?"收入":"支出" }}</span>
             <span class="flex flex-1 justify-start qyjtitle" :title="item.qyjtitle">{{ item.qyjtitle }}</span>
            <span class="flex flex-1 justify-center">￥{{ item.qyj }}</span>
          </div>
      </a-list-item>
      </template>
  </a-list>
  
  </div>
</template>
<script lang="ts">
import { CaretRightOutlined } from '@ant-design/icons-vue';
import { ref,defineComponent } from 'vue';
import { qyjlistapi } from '/@/api/dp/dpbaseapi';
import { List,ListItem } from 'ant-design-vue';

export default defineComponent({
  components: {
   CaretRightOutlined,
    AList:List,
   AListItem:ListItem
  },
})
</script>

<script lang="ts" setup>  
    const props = defineProps({
        qyjtype:String
    });
    const listData=ref([]);
    const pagination = ref({
      pageNo:1,
      pageSize:20,
      count:0,
    });
    const visibleD = ref<boolean>(false);
    const newsobj=ref({});
    
    getlist();
    async function getlist(){
      const res=  await qyjlistapi({qyjtype:1});
      pagination.value.pageNo=res.pageNo;
      pagination.value.pageSize=res.pageSize;
      pagination.value.count=res.count;
      listData.value=res.list;
    }

    
</script>

<style scoped>
.text-ellipsis {
  height: 2.6em; /* 设置高度为固定的行高的两倍 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制在两行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 添加省略号 */
}
.qyjtitle{
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
  display: inline-block;
}
</style>